<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script>
        $(function(){
            var $li=$("li:eq(0)");
            $li.on("mouseenter",function(){
                $li.css("width","140px");
                $li.css("height","50px");
                $li.css("font-size","20px");
            })
            $li.on("mouseleave",function(){
                $li.css("width","120px");
                $li.css("height","40px");
                $li.css("font-size","16px");
            })
            var $li1=$("li:eq(1)");
            $li1.on("mouseenter",function(){
                $li1.css("width","140px");
                $li1.css("height","45px");
                $li1.css("font-size","20px");
            })
            $li1.on("mouseleave",function(){
                $li1.css("width","120px");
                $li1.css("height","40px");
                $li1.css("font-size","16px");
            })
            var $li2=$("li:eq(2)");
            $li2.on("mouseenter",function(){
                $li2.css("width","140px");
                $li2.css("height","50px");
                $li2.css("font-size","20px");
            })
            $li2.on("mouseleave",function(){
                $li2.css("width","120px");
                $li2.css("height","40px");
                $li2.css("font-size","16px");
            })
            var $li3=$("li:eq(3)");
            $li3.on("mouseenter",function(){
                
                $li3.css("width","140px");
                $li3.css("height","50px");
                $li3.css("font-size","20px");
            })
            $li3.on("mouseleave",function(){
                $li3.css("width","120px");
                $li3.css("height","40px");
                $li3.css("font-size","16px");
            })
            var $li4=$("li:eq(4)");
            $li4.on("mouseenter",function(){
                $li4.css("width","140px");
                $li4.css("height","50px");
                $li4.css("font-size","20px");
            })
            $li4.on("mouseleave",function(){
                $li4.css("width","120px");
                $li4.css("height","40px");
                $li4.css("font-size","16px");
            })
            $(".div2>ul>li:eq(0)").on("mouseenter",function(){
                $(".div2>ul>li:eq(0)").addClass("rotate");
            })
            $(".div2>ul>li:eq(1)").on("mouseenter",function(){
                $(".div2>ul>li:eq(1)").addClass("rotate");
            })
            $(".div2>ul>li:eq(2)").on("mouseenter",function(){
                $(".div2>ul>li:eq(2)").addClass("rotate");
            })
            $(".div2>ul>li:eq(3)").on("mouseenter",function(){
                $(".div2>ul>li:eq(3)").addClass("rotate");
            })
            $(".div2>ul>li:eq(4)").on("mouseenter",function(){
                $(".div2>ul>li:eq(4)").addClass("rotate");
            })
        })
    </script>
    <style>
        ul{
            list-style: none;
            margin: 0 auto; 
        }
        .div1{
            width: 1000px;
            height: 50px;
            margin-bottom: 50px;
        }
        ul li{
            float: left;
            margin-right: 20px;
            background-color: #DB1A27;
            height: 40px;
            line-height: 40px;
            width: 120px;
            text-align: center;
            color: #fff;
        }
        .div2>ul>li{
            float: left;
            margin-right: 20px;
            background-color: #DB1A27;
            height: 40px;
            line-height: 40px;
            width: 120px;
            text-align: center;
            color: #fff;
            transform-origin:50% 50%;
            transition: all 3s; 
        }
        .div2>ul>li.rotate{
            transform: translate(0px, 0px) rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div class="div1">
    <ul>
        <li>导航栏1</li>
        <li>导航栏2</li>
        <li>导航栏3</li>
        <li>导航栏4</li>
        <li>导航栏5</li>
    </ul>
    </div>
    <div class="div2">
    <ul class="ul2">
        <li>导航栏1</li>
        <li>导航栏2</li>
        <li>导航栏3</li>
        <li>导航栏4</li>
        <li>导航栏5</li>
    </ul>
    </div>
</body>
</html>